// Note: App.scss already imports mdc-image-list dist styles
@import "@material/image-list/mixins";

.hero-image-list {
  @include mdc-image-list-standard-columns(5);

  width: 300px;
  margin: 0;
}

.hero-image-list .mdc-image-list__image {
  background-color: #000;
}

.standard-image-list {
  @include mdc-image-list-aspect(1.5); // Images are 3:2
  @include mdc-image-list-standard-columns(5);
  @include mdc-image-list-shape-radius(8px);

  max-width: 900px;
}

.masonry-image-list {
  @include mdc-image-list-masonry-columns(5);
  max-width: 900px;
}

@media (max-width: 599px) {
  .standard-image-list {
    @include mdc-image-list-standard-columns(3);
  }

  .masonry-image-list {
    @include mdc-image-list-masonry-columns(3);
  }
}
